<template>
  <div
    class="row border-top border-panda-dark-dark bg-panda-dark-dark line-height-30px items-center full-width"
  >
    <div
      v-for="(items,indexs) in  query_form_date_arr"
      :key="`query_form_date_${indexs}`"
      @click="query_form_date_tab_click(indexs)"
      :class="selected_date_tab==indexs?'bg-panda-query-date-active':''"
      class="float-left text-panda-text-dark text-center cursor-pointer line-height-24px q-mr-md panda-query-date-tab"
    >
      <span
        style="margin-left:4px;"
        class="panda-py-2px panda-px-10px border-radius-10px panda-query-date-tab-label"
        :class="selected_date_tab==indexs?'text-panda-text-light ':'text-panda-text-dark'"
      >{{items.label}}</span>
    </div>
    <div
      v-if="show_history"
      :class="selected_date_tab==8?'bg-panda-query-date-active':''"
      class="float-left text-panda-text-dark text-center cursor-pointer line-height-24px q-mr-md panda-query-date-tab relative-position"
    >
      <span
        style="margin-left:4px;"
        @click="query_form_date_tab_click(8)"
        class="panda-py-2px panda-px-10px border-radius-10px panda-query-date-tab-label"
        :class="selected_date_tab==8?'text-panda-text-light ':'text-panda-text-dark'"
      >历史赛程</span>
      <div
        v-show="selected_date_tab==8 &&show_q_date_component"
        class="absolute bg-panda-base-dark border-radius-4px q-pa-md panda-border"
        style="top:32px; height:140px;z-index:3;box-shadow: 0 2px 14px 0 rgba(0,0,0,0.50);border-radius: 4px; padding:20px;"
      >
        <!-- 时间日期组件 -->
        <q-date
          v-model="history_date"
          @input="handle_history_date_confirm"
          mask="YYYY-MM-DD HH:mm:ss"
          color="panda-base-dark"
          text-color="panda-text-light"
          :options="startTime_limit"
          dark
        />
      </div>
    </div>
    <q-space />
    <div
      class="float-right text-panda-text-dark self-end text-right position-relative"
      style="width:121px;    height: 30px;"
      :class="show_more_query?'bg-panda-expand-bg-color':''"
    >
      <!--v-if  有改动-->
      <span
        @click="show_more_query=!show_more_query"
        v-if="show_show_more_query_btn || true"
        class="panda_show_more"
        style="     vertical-align: text-bottom; font-size:12px;     line-height: 28px;"
      >
        <span>{{show_more_query?'隐藏':'展开更多'}}筛选</span>
        <q-icon name="keyboard_arrow_down " size="14px" :class="show_more_query?'rotate-180':''"></q-icon>
        <q-icon
          name="keyboard_arrow_down "
          size="14px"
          :class="show_more_query?'rotate-180':''"
          class="position-absolute"
          style="left: 77px; top: 5px;"
        ></q-icon>
        <!-- <span
          class="panda_icon_arrow_down panda-icon-mini" 
          :class="show_more_query?'rotate-180':''"
        ></span>-->
      </span>

      <span
        class="panda_icon_switch panda-icon-mini"
        style=" display: inline-block; margin: 6px 8px; vertical-align: top;   margin: 6px 8px;  "
        @click="toggle_showrightdetail"
      >
        <q-tooltip :content-style="{ width: '90px' }">{{rightdetail_tooltip}}</q-tooltip>
      </span>
    </div>
  </div>
</template>
<style lang="stylus" scoped>
.panda-query-date-tab:hover .panda-query-date-tab-label {
  color: #ffffff !important;
}

.bg-panda-query-date-active .panda-query-date-tab-label {
  background-color: #2D374A !important;
}

.panda_show_more:hover {
  color: #4EA1FF;
}
</style>
<script>
import { mapActions, mapGetters } from "vuex";
import alertdialogmixin from "src/mixins/module/alertdialogmixin.js";
import formartmixin from "src/mixins/module/formartmixin.js";
import rightinfomixin from "src/mixins/layout/rightinfo.js";
import routerCacheMixin from "src/mixins/routerCache/routerCache.js";
export default {
  mixins: [alertdialogmixin, rightinfomixin, formartmixin, routerCacheMixin],
  data() {
    return {
      show_q_date_component: false,
      selected_date_tab: 0,
      show_more_query: false,
      queryform_form: {},
      startTimeFrom_history: "", // 针对时间选择器 ，真正
      startTimeEnd_history: "",
      query_form_date_arr: [],
      history_date: ""
    };
  },
  created() {
    this.init_query_form_date_arr();
    this.query_form_date_tab_click(0);
  },
  props: {
    show_show_more_query_btn: true,
    show_history: {
      type: Boolean,
      default: true
    } // 显示历史赛程
  },
  watch: {
    show_more_query() {
      this.$emit("show_more_query_change", this.show_more_query);
    }
  },
  methods: {
    ...mapActions({
      set_breadcrumbsPart3: "set_breadcrumbsPart3"
    }),
    comoute_showrightdetail_by_router() {},
    handle_history_date_confirm(val) {
      console.log(val);
      this.show_q_date_component = false;
      this.emit_query_period_change_when_tab_8();
    },

    router_cache_query_period_val(val) {
      this.set_router_cache_by_path_and_value(
        "queryform_form.startTimeFrom",
        val.startTimeFrom_history
      );
      this.set_router_cache_by_path_and_value(
        "queryform_form.startTimeEnd",
        val.startTimeEnd_history
      );
    },

    emit_query_period_change() {
      // 历史 数据  支持 选定 具体时间 和 起始时间 后做请求 ，避免重复请求
      console.log(this.selected_date_tab);
      if (this.selected_date_tab == 8 && this.show_history) {
        return false;
      }
      let today_0 = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
      let today_0_utc = today_0 + 4 * 60 * 60 * 1000;
      let oneday = 24 * 60 * 60 * 1000;
      let val = {};
      val = {
        startTimeFrom_history: today_0_utc + this.selected_date_tab * oneday,
        startTimeEnd_history:
          today_0_utc + (this.selected_date_tab + 1) * oneday
      };
      if (this.selected_date_tab == 7 && this.show_history) {
        // 8天后所有
        val.startTimeEnd_history = "";
        val.tab = 7;
      }
      console.log('this.$emit("query_period_change", val);');
      console.log(val);
      this.$emit("query_period_change", val);
      this.router_cache_query_period_val(val);
    },
    emit_query_period_change_when_tab_8() {
      let val = {};
      let today_0 = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
      val = {
        startTimeFrom_history:
          Date.parse(this.history_date) + 4 * 60 * 60 * 1000,
        startTimeEnd_history:
          Date.parse(this.format_date(today_0)) + 28 * 60 * 60 * 1000
      };
      console.log('this.$emit("query_period_change", val);');
      console.log(val);
      this.$emit("query_period_change", val);
      this.router_cache_query_period_val(val);
    },
    init_query_form_date_arr() {
      let arr = [];
      let t_s = new Date().getTime();
      for (let i = 0; i < 7; i++) {
        let time = new Date(t_s + i * 24 * 60 * 60 * 1000);
        let m = (time.getMonth() + 1 + "").padStart(2, 0);
        let d = (time.getDate() + "").padStart(2, 0);
        arr.push({
          value: i,
          label: `${m}月${d}日`
        });
      }
      arr[0].label = "今日";
      arr[1].label = "明日";
      arr.push({
        value: 7,
        label: `其他早盘`
      });
      this.query_form_date_arr = arr;
    },
    query_form_date_tab_click(index) {
      this.selected_date_tab = index;
      if (index == 8 && this.show_history) {
        this.show_q_date_component = !this.show_q_date_component;
        let today_0 = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
        this.history_date = this.format_date(today_0);
      } else {
        this.show_q_date_component = false;
        this.emit_query_period_change();
        this.set_breadcrumbsPart3([this.query_form_date_arr[index].label]);
      }
    },
    startTime_limit(date) {
      return date >= "2018/08/01" && date <= this.format_day(Date.now());
    },
    handle_queryform_starttime_confirm() {
      let sf = this.startTimeFrom_history;
      let se = this.startTimeEnd_history;
      if (!sf) {
      }
      if (sf) {
        if (sf && se && Date.parse(sf) >= Date.parse(se)) {
          let message = `结束时间必须大于开始时间！`;
          this.show_alert_dialog(message);
        } else {
          // 正常情况 ，处理API 请求
          this.show_q_date_component = false;
          this.set_breadcrumbsPart3(["历史赛程"]);
          this.emit_query_period_change_when_tab_8();
        }
      } else {
        let message = `开始时间必须选择！`;
        this.show_alert_dialog(message);
      }
    },

    handle_queryform_starttime_abort() {
      console.log("1");
      this.show_q_date_component = false;
    }
  }
};
</script>